<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.p{
			width: 500px;
			height: 500px;
			border-radius: 50%;
		}

	</style>

</head>
<body>
	<img src="../images/01.jpg" alt="" id="pic" class="p">

	<script>
		var opic=document.getElementById('pic');

		opic.onmouseenter=function(){
			opic.setAttribute('src','../images/s04.jpg');
			opic.setAttribute('class','p')
		}

		opic.onmouseleave=function(){
			opic.setAttribute('src','../images/01.jpg');
			opic.removeAttribute('class')
		}


	</script>
</body>
</html>